<template>
  <div class="home">
    <div ref="echarts" style="width: 600px; height: 800px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "../../china"; // 引入中国地图
import { reqGetMockData } from "@/api/index";
export default {
  name: "HomeView",
  data() {
    return {
      myChart: null, // echarts对象
      chartData: [],
    };
  },
  mounted() {
    this.getMockData();
  },
  methods: {
    //mock请求数据
    async getMockData() {
      const { data } = await reqGetMockData();
      this.chartData = data;
      this.init();
    },

    init() {
      const option = {
        // 绘制地图
        tooltip: {
          // 提示框信息配置
          triggerOn: "click", // 触发方式
          trigger: "item", // 对象
          formatter: (params) => {
            // 格式化提示框信息。 若要访问 data中的数据则要用箭头函数
            return `地域：${params.name} <br/>
                        在营企业：${
                          this.chartData.find(
                            (item) => item.name === params.name
                          )?.value ?? 0
                        }
                        `;
          },
        },
        grid: {
          left: 150,
          top: 400,
          width: "35%",
        },
        // color: "#73c0de",
        visualMap: {
          //左下角的渐变颜色条
          seriesIndex: 0, //指定取哪个系列的数据，即哪个系列的 series.data。
          min: 0,
          max: 300,
          left: "left",
          top: 200,
          text: ["极高", "无数据"],
          inRange: {
            color: ["#e0ffff", "#006edd"],
          },
          show: true,
          hoverLink: true,
        },
        series: [
          // 配置地图
          {
            name: "mapChart",
            type: "map", // 类型
            map: "china", // 地图名称，要和引入的地图名一致
            roam: false, // 是否开启鼠标缩放和平移漫游
            left: "20",
            top: 20,
            label: {
              // 地图省份模块配置
              show: true, // 是否显示省份名称
              position: "right", // 显示位置
            },
            emphasis: {
              // 高亮状态下的多边形和标签样式。
              label: {
                show: true, // 是否显示标签。
              },
            },
            data: this.chartData, // 提示框的数据源
          },
        ],
      };
      this.myChart = echarts.init(this.$refs.echarts); // 初始echarts
      this.myChart && this.myChart.setOption(option);
    },
  },
};

// let p = new Promise((resolve, reject) => {
//   let flag = Math.random() > 0.5 ? true : false;
//   if (flag) {
//     console.log("使用resolve将promise状态从pending变为resolved");
//     resolve("success");
//   } else {
//     console.log("使用reject将promise状态从pending变为rejected");
//     reject("fail");
//   }
// });

// // @1
// p.then(
//   (result) => {
//     console.log("接受resolved的结果");
//     console.log(result);
//   },
//   (err) => {
//     console.log("捕获错误的结果");
//     console.log(err);
//   }
// );
</script>
